<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Template | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
            
            h1, h2, h3 {
                text-shadow: 2px 2px 2px white;
            }
            
            #content {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            #content>* {
                padding: 10px 20px;
                width: 50%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            .boxList {
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
            }
            
            [class|=box] {
                margin: 10px;
                width: 100px;
                height: 100px;
                box-shadow: 2px 2px 4px black;
                border-radius: 8px;
                
                font-size: 22px;
                text-align: center;
                line-height: 100px;
                color: white;
                text-shadow: 2px 2px 2px black;
                
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }
            [class|=box]:hover {
                box-shadow: 2px 2px 8px black;
            }
            [class|=box]:active {
                box-shadow: inset 0px 0px 4px black;
            }
            [class|=box] > div {
                border-radius: 8px;
                
                background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
                background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
                background: -o-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
                background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
                background: linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%);
            }
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script id="test-script">
            
            TM.loadScript("graphics", "color");
            
            /*
             * Test
             */
            TM.main(function()
            {
                // コンソール
                var c = TM.DebugConsole("#console");
                //var c = console; // コンソールの方に出力
                
                // 
                // 
                // Color
                c.group("【color】")
                for (var key in TM.$Color.COLOR_LIST) {
                    var color       = TM.$Color.apply( null, TM.$Color.COLOR_LIST[key] );
                    var eColorBox   = TM.$class("box-"+key);
                    eColorBox.style.background = color.toCSSValueAsRGB();
                    c.log(key.paddingRight(8), ':', color.toCSSValueAsRGB());
                }
                c.groupEnd();
                
                // 
                // 
                // HSL
                c.group("【hsl】")
                for (var i=0; i<360; i+=15) {
                    var color = TM.$Color().setSmart( "hsl({0}, {1}%, {2}%)".format(i, 100, 50) );
                    var eColorBox = TM.$class("box-hsl-"+String(i));
                    eColorBox.style.background = color.toCSSValueAsRGB();
                    c.log(i.padding(3, ' '), ':', color.toCSSValueAsRGB());
                }
                c.groupEnd();
                
                // 
                // 
                // Linear Gradient
                c.group("【Linear Gradient】")
                var linear_gradient = TM.Graphics.LinearGradient({
                    angle: 30,
                    colorList: [
                        { color: TM.$Color(255, 0, 0) },
                        { color: TM.$Color(0, 255, 0), pos:40 },
                        { color: TM.$Color(0, 0, 255) },
                    ]
                });
                TM.$class("box-liner").style["background"] = linear_gradient.toCSSValue();
                c.log( linear_gradient.toCSSValue() );
                c.groupEnd();
                
                // 
                // 
                // Radial Gradient
                c.group("【Radial Gradient】")
                var radial_gradient = TM.RadialGradient({
                    centerX: { value: 50, type: "%" },
                    centerY: { value: 50, type: "%" },
                    colorList: [
                        { color: TM.$Color(255, 0, 0), pos:0 },
                        { color: TM.$Color(0, 255, 0), pos:70 },
                        { color: TM.$Color(0, 0, 255), pos:100 },
                    ]
                });
                TM.$class("box-radial").style["background"] = radial_gradient.toCSSValue();
                c.log( radial_gradient.toCSSValue() );
                c.groupEnd();
                
                // 
                // 
                // 
                var eBoxList = TM.$queryAll("[class|=box]");
                for (var i=0,len=eBoxList.length; i<len; ++i) {
                    var box = eBoxList[i];
                    box.addEventListener("click", function(){
                        document.body.style.background = this.style.background;
                    }, false);
                }
            });
            
        </script>
        
        <script>
            TM.main(function(){
                TM.$id("code").innerText = TM.$id("test-script").innerText;
            });
            
            TM.addNamespace("prettify", "./../../plugins/prettify");
            TM.loadPrettify();
            window.onload = function() {
                prettyPrint();
            };
        </script>
    </head>
    
    <body>
         
        <h1>Template | TM Lib</h1>
        
        <div id="content">
            <section>
                <h2>Test</h2>
                <section>
                    <h3>Color</h3>
                    <div class="boxList">
                        <div class="box-black"><div>black</div></div>
                        <div class="box-silver"><div>silver</div></div>
                        <div class="box-gray"><div>gray</div></div>
                        <div class="box-white"><div>white</div></div>
                    </div>
                    <br />
                    <div class="boxList">
                        <div class="box-maroon"><div>maroon</div></div>
                        <div class="box-red"><div>red</div></div>
                        <div class="box-purple"><div>purple</div></div>
                        <div class="box-fuchsia"><div>fuchsia</div></div>
                    </div>
                    <br />
                    <div class="boxList">
                        <div class="box-green"><div>green</div></div>
                        <div class="box-lime"><div>lime</div></div>
                        <div class="box-olive"><div>olive</div></div>
                        <div class="box-yellow"><div>yellow</div></div>
                    </div>
                    <br />
                    <div class="boxList">
                        <div class="box-navy"><div>navy</div></div>
                        <div class="box-blue"><div>blue</div></div>
                        <div class="box-teal"><div>teal</div></div>
                        <div class="box-aqua"><div>aqua</div></div>
                    </div>
                </section>
                <section>
                    <h3>HSL</h3>
                    <div class="boxList">
                        <div class="box-hsl-0"><div>0</div></div>
                        <div class="box-hsl-15"><div>15</div></div>
                        <div class="box-hsl-30"><div>30</div></div>
                        <div class="box-hsl-45"><div>45</div></div>
                        <div class="box-hsl-60"><div>60</div></div>
                        <div class="box-hsl-75"><div>75</div></div>
                    </div>
                    <br />
                    <div class="boxList">
                        <div class="box-hsl-90"><div>90</div></div>
                        <div class="box-hsl-105"><div>105</div></div>
                        <div class="box-hsl-120"><div>120</div></div>
                        <div class="box-hsl-135"><div>135</div></div>
                        <div class="box-hsl-150"><div>150</div></div>
                        <div class="box-hsl-165"><div>165</div></div>
                    </div>
                    <br />
                    <div class="boxList">
                        <div class="box-hsl-180"><div>180</div></div>
                        <div class="box-hsl-195"><div>195</div></div>
                        <div class="box-hsl-210"><div>210</div></div>
                        <div class="box-hsl-225"><div>225</div></div>
                        <div class="box-hsl-240"><div>240</div></div>
                        <div class="box-hsl-255"><div>255</div></div>
                    </div>
                    <br />
                    <div class="boxList">
                        <div class="box-hsl-270"><div>270</div></div>
                        <div class="box-hsl-285"><div>285</div></div>
                        <div class="box-hsl-300"><div>300</div></div>
                        <div class="box-hsl-315"><div>315</div></div>
                        <div class="box-hsl-330"><div>330</div></div>
                        <div class="box-hsl-345"><div>345</div></div>
                    </div>
                </section>
                <section>
                    <h3>Gradient</h3>
                    <div class="boxList">
                        <div class="box-liner"><div>linear</div></div>
                        <div class="box-radial"><div>radial</div></div>
                    </div>
                </section>
                <section>
                    <h3>Console</h3>
                    <pre id="console" class="prettyprint"></pre>
                </section>
            </section>
            <section>
                <h2>Code</h2>
                <pre id="code" class="prettyprint"></pre>
            </section>
        </div>
        
        
    </body>
</html>
